<template>
  <div>
    <el-dialog
      title="添加用户"
      :visible.sync="isVisible"
      width="40%"
      class="dialog"
    >
      <el-form :model="form" :rules="rules" ref="form" label-width="100px">
        <el-form-item label="学号" :label-width="formLabelWidth" prop="id">
          <el-input v-model="form.id" autocomplete="off" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="姓名" :label-width="formLabelWidth" prop="name">
          <el-input
            v-model="form.name"
            autocomplete="off"
            size="mini"
          ></el-input>
        </el-form-item>
        <el-form-item label="登陆密码" :label-width="formLabelWidth" prop="pwd">
          <el-input
            v-model="form.pwd"
            autocomplete="off"
            type="password"
            size="mini"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="年级"
          :label-width="formLabelWidth"
          prop="grade"
          size="mini"
        >
          <el-select v-model="form.grade" placeholder="请选择">
            <el-option label="2018" value="2018"></el-option>
            <el-option label="2019" value="2019"></el-option>
            <el-option label="2020" value="2020"></el-option>
            <el-option label="2021" value="2021"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="专业"
          :label-width="formLabelWidth"
          prop="major"
          size="mini"
        >
          <el-select v-model="form.major" placeholder="请选择">
            <el-option label="无" value="0"></el-option>
            <el-option label="人工智能" value="人工智能"></el-option>
            <el-option
              label="信息管理与信息系统"
              value="信息管理与信息系统"
            ></el-option>
            <el-option label="电子信息工程" value="电子信息工程"></el-option>
            <el-option
              label="计算机科学与技术"
              value="计算机科学与技术"
            ></el-option>
            <el-option
              label="计算机科学与技术(含师范)"
              value="计算机科学与技术(含师范)"
            ></el-option>
            <el-option label="计算机类" value="计算机类"></el-option>
            <el-option
              label="计算机类(师范)"
              value="计算机类(师范)"
            ></el-option>
            <el-option label="软件工程" value="软件工程"></el-option>
            <el-option
              label="软件工程(嵌入式培养)"
              value="软件工程(嵌入式培养)"
            ></el-option>
            <el-option label="通信工程" value="通信工程"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="班级"
          :label-width="formLabelWidth"
          prop="class"
          size="mini"
        >
          <el-select v-model="form.class" placeholder="请选择">
            <el-option label="无" value="0"></el-option>
            <el-option label="1701班" value="1701"></el-option>
            <el-option label="1702班" value="1702"></el-option>
            <el-option label="1703班" value="1703"></el-option>
            <el-option label="1704班" value="1704"></el-option>
            <el-option label="1705班" value="1705"></el-option>
            <el-option label="1706班" value="1706"></el-option>
            <el-option label="1801班" value="1801"></el-option>
            <el-option label="1802班" value="1802"></el-option>
            <el-option label="1803班" value="1803"></el-option>
            <el-option label="1804班" value="1804"></el-option>
            <el-option label="1805班" value="1805"></el-option>
            <el-option label="1806班" value="1806"></el-option>
            <el-option label="1807班" value="1807"></el-option>
            <el-option label="1901班" value="1901"></el-option>
            <el-option label="1902班" value="1902"></el-option>
            <el-option label="1903班" value="1903"></el-option>
            <el-option label="1904班" value="1904"></el-option>
            <el-option label="1905班" value="1905"></el-option>
            <el-option label="1906班" value="1906"></el-option>
            <el-option label="1907班" value="1907"></el-option>
            <el-option label="2001班" value="2001"></el-option>
            <el-option label="2002班" value="2002"></el-option>
            <el-option label="2003班" value="2003"></el-option>
            <el-option label="2004班" value="2004"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="手机" :label-width="formLabelWidth" prop="phone">
          <el-input
            v-model="form.phone"
            autocomplete="off"
            size="mini"
          ></el-input>
        </el-form-item>
        <el-form-item label="邮箱" :label-width="formLabelWidth" prop="address">
          <el-input
            v-model="form.address"
            autocomplete="off"
            size="mini"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="用户类型"
          :label-width="formLabelWidth"
          prop="type"
          size="small"
        >
          <el-select v-model="form.type" placeholder="请选择">
            <el-option label="普通用户" value="3"></el-option>
            <el-option label="管理员" value="2"></el-option>
            <el-option label="超级管理员" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('form')" size="small"
            >确定</el-button
          >
          <el-button @click="isVisible = false" size="small">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    var checkEmail = (rule, value, callback) => {
      const mailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/;
      setTimeout(() => {
        if (mailReg.test(value) || value.length == 0) {
          callback();
        } else {
          callback(new Error("请输入正确的邮箱格式"));
        }
      }, 100);
    };
    return {
      isVisible: false,
      form: {
        id: "",
        name: "",
        pwd: "",
        grade: "",
        major: "",
        class: "",
        phone: "",
        address: "",
        type: "",
      },
      formLabelWidth: "120px",
      rules: {
        id: [{ required: true, message: "请输入学号", trigger: "change" }],
        name: [{ required: true, message: "请输入姓名", trigger: "change" }],
        pwd: [{ required: true, message: "请输入登录密码", trigger: "change" }],
        grade: [{ required: true, message: "请输入年级", trigger: "change" }],
        major: [{ required: true, message: "请输入专业", trigger: "change" }],
        class: [{ required: true, message: "请输入班级", trigger: "change" }],
        address: [{ validator: checkEmail, trigger: "blur" }],
        type: [
          { required: true, message: "请输入用户类型", trigger: "change" },
        ],
      },
    };
  },
  methods: {
    openDialog() {
      this.isVisible = true;
    },
    submitForm(form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          console.log("成功了");
          this.addMember();
          this.$notify({
            title: "成功",
            message: "添加成功",
            type: "success",
            duration: 2000,
          });
          setTimeout(() => {
            this.submit();
            this.$emit("add");
          }, 1000);
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    submit() {
      console.log(this.form);
      this.$emit("close");
    },
    addMember() {
      this.$axios
        .post("/user/add", {
          studentNumber: this.form.id,
          password: this.form.pwd,
          major: this.form.major,
          phone: this.form.phone,
          email: this.form.address,
          name: this.form.name,
          grade: this.form.grade,
          class: this.form.class,
          roleId: this.form.type,
        })
        .then((res) => {
          console.log(res);
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.el-input {
  width: 50%;
}
//让dialog出现在屏幕正中间
.dialog {
  /deep/.el-dialog {
    display: flex;
    flex-direction: column;
    margin: 0 !important;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-height: calc(100% - 10px);
    max-width: calc(100% - 10px);
    height: 50% !important;
    font-size: 0.5rem;
  }
  /deep/.el-dialog .el-dialog__body {
    flex: 1;
    overflow: auto;
  }
}
</style>